<template>
    <el-dialog :title="tip" :visible.sync="dialogFormVisible">
        <el-form>
            <el-form-item label="学生学号" :label-width="formLabelWidth">
                <el-input :value="sid" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="实时作业" :label-width="formLabelWidth">
                <el-select v-model="selectedJobIndex" placeholder="请选择" @change="handleChange">
                    <el-option
                            v-for="(item,i) in job"
                            :key="i"
                            :label="item.context"
                            :value="i">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="文件上传" :label-width="formLabelWidth">
                <upload_xls :close_file="dialogFormVisible" :url="url" v-show='j_flag===1'></upload_xls>
                <upload_img :close_file="dialogFormVisible" :url="url" v-show="j_flag===2" @refresh="goRefresh"></upload_img>
                <span v-show="j_flag===0" style="color: red">当前没有需要提交的作业</span>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import store from '../../store'
    import upload_xls from './UploadXls.vue'
    import upload_img from './UploadImg.vue'

    export default {
        name: "PushJob",
        mounted() {
            //请求实时job
            this.getInstantJob()
        },
        data() {
            return {
                j_flag:0,
                formLabelWidth: '120px',
                dialogFormVisible: false,
                job: [],
                selectedJobIndex: 0,
                sid:"",
                _jid:"",
                url:'',
            }
        },
        methods: {
            goRefresh(){
                this.job=[]
                this.selectedJobIndex = 0
                this._jid=''
                this.url=''
                this.j_flag=0
                this.getInstantJob()

            },
            handleChange(selectedJobIndex){
                this._jid = this.job[selectedJobIndex].jid
                this.j_flag=this.job[this.selectedJobIndex].j_type
                this.url = 'http://localhost:8080/sjrecord/pushmyjob?sid='+this.sid+'&jid='+this._jid
            },
            getInstantJob() {
                this.$http
                    .get("sjrecord/getById?sid="+store.state.user.uid)
                    .then(result => {
                        result.body.forEach(item=>{
                            if(item.status===0){
                                this.job.push({
                                    jid: item.jid,
                                    j_type:item.j_type,
                                    context:item.tname+"老师——"+item.context
                                });
                            }
                        });
                        if(this.job.length!==0){
                            this.sid = store.state.user.uid
                            this._jid = this.job[this.selectedJobIndex].jid
                            this.j_flag=this.job[this.selectedJobIndex].j_type
                            this.url = 'http://localhost:8080/sjrecord/pushmyjob?sid='+this.sid+'&jid='+this._jid
                        }
                    });
            },
            postFlagToParent() {
                this.$emit("getValueFromPushJob", false);
            }
        },
        watch: {
            flag: function () {
                this.dialogFormVisible = this.flag;
            },
            dialogFormVisible: function () {
                if (!this.dialogFormVisible) {
                    this.postFlagToParent()
                }
            },
        },
        props: ['flag', 'tip'],
        components: {
            upload_xls,
            upload_img
        }
    }
</script>

<style lang="scss" scoped>
    .el-form {
        .el-form-item {
            .el-select {
                width: 250px;
            }

            .el-input {
                width: 350px;
            }
        }
    }
</style>
